<template>
  <div class="btnList">
    <el-button type="primary" @click="btnFn('0')"
      >未开始{{ taskStatus.notStart }}</el-button
    >
    <el-button type="success" @click="btnFn('4')"
      >已完成{{ taskStatus.conduct }}</el-button
    >
    <el-button type="info" @click="btnFn('1')">进行中{{ taskStatus.complete }}</el-button>
    <el-button type="danger" @click="btnFn('3')">失败{{ taskStatus.fail }}</el-button>
  </div>
  <div>
    <el-table
      class="tableList"
      :data="tableData.data"
      border
      show-overflow-tooltip
      highlight-current-row
      :header-cell-style="{
        background: '#F3F4F7',
        color: '#272626',
        'font-size': '16px',
      }"
      style="width: 100%"
    >
      <el-table-column prop="taskType" label="任务类型" />
      <el-table-column prop="taskUrl" label="任务URL" />
      <el-table-column prop="taskStatus" label="任务状态" :formatter="formatterStatus" />
      <el-table-column prop="createAt" label="创建时间" />
      <el-table-column prop="updatedAt" label="更新时间" />
      <el-table-column prop="failReason" label="失败原因" />
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="taskTryFn(scope.row.id)">重试</el-button>
          <el-button link type="danger" size="small" @click="taskDelFn(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.total"
      :page-sizes="[10, 20, 30, 50]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { taskDelete, taskRetry, tasksList, tasksStatus } from "@/api/taskSituation";
import { id } from "element-plus/es/locales.mjs";
import { ElMessage } from "element-plus";

// 页码
const currentPage = ref(1);
// 页数
const pageSize = ref(10);

// 任务状态值
const taskStatus = reactive({
  notStart: "0",
  conduct: "10",
  complete: "222",
  fail: "10",
});

// 存储切换的点击值
const taskStatusValue = ref();

// 表格数据
const tableData = reactive({
  total: 10,
  data: [],
});

// 点击按钮事件
const btnFn = (val: string) => {
  taskStatusValue.value = val;
  tasksListFn(val);
};

const taskDelFn = (id: string) => {
  taskDelete(id).then(() => {
      ElMessage.success("操作成功");
      btnFn("3");
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
}

const taskTryFn = (id: string) => {
  taskRetry(id).then(() => {
      ElMessage.success("操作成功");
      btnFn("3");
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
}

// 获取表格数据
const tasksListFn = (val: string) => {
  const getList = {
    taskStatus: val,
    pageNo: currentPage.value,
    pageSize: pageSize.value,
  };
  tasksList(getList).then((res) => {
    tableData.data = res.data.records;
    tableData.total = res.data.totalCount;
  });
};

// 获取任务状态
const tasksStatusFn = () => {
  tasksStatus().then((res) => {
    // 0未开始 1进行中 3失败 4已完成
    taskStatus.notStart = res.data["0"];
    taskStatus.conduct = res.data["4"];
    taskStatus.complete = res.data["1"];
    taskStatus.fail = res.data["3"];
    btnFn("0");
    taskStatusValue.value = "0";
  });
};

// 点击页数时
function handleSizeChange(val: number) {
  currentPage.value = 1;
  pageSize.value = val;
  tasksListFn(taskStatusValue.value);
}

// 点击或跳转页码时
function handleCurrentChange(val: number) {
  currentPage.value = val;
  // 页码改变时 页数不变 重新请求数据
  tasksListFn(taskStatusValue.value);
}

// 任务状态格式化
const formatterStatus = (row: any, column: any) => {
  if (row.taskStatus == "0") {
    return "未开始";
  }
  if (row.taskStatus == "1") {
    return "进行中";
  }
  if (row.taskStatus == "3") {
    return "失败";
  }
  if (row.taskStatus == "4") {
    return "已完成";
  }
};

onMounted(() => {
  // 先获取任务状态 默认请求未开始的表格数据
  tasksStatusFn();
});
</script>

<style scoped>
.btnList {
  margin-bottom: 20px;
}
.tableList {
  margin-bottom: 20px;
}
</style>
